<template>
  <div class="drawerUserBalance">
    <el-drawer :visible="drawerRateBalance"
               title="积分余额管理"
               size="60%"
               :before-close="handleClose"
               ref="drawer">
      <!-- 用户余额管理-->
      <el-form label-width="77px"
               ref="where"
               class="drawerUserBalance"
               @keyup.enter.native="search"
               @submit.native.prevent
               :model="where">

        <el-form-item label="选择类型:"
                      prop="operateType">
          <div>
            <el-radio-group v-model="where.operateType">
              <el-radio border
                        label="1"
                        value="1">充值积分</el-radio>
              <el-radio border
                        label="2"
                        value="2">扣除积分</el-radio>
            </el-radio-group>

          </div>
        </el-form-item>

        <el-form-item label="积分操作:"
                      prop="balance">
          <div class="flex-between">
            <el-input clearable
                      onkeyup="value=value.replace(/[^0-9.]/g,'')"
                      v-model="where.integral"
                      placeholder="请输入积分操作" />
            <el-button @click="sumbit()"
                       :loading=loading
                       type="primary">确定</el-button>
          </div>
        </el-form-item>

        <el-form-item label="当前积分:"
                      prop="dateRange">
          <div style="color: red;">{{ rechargeObject?.integral?rechargeObject?.integral:'0' }} 积分</div>
        </el-form-item>
      </el-form>
      <integralRecordList :sumbitBoolen="integralBoolen"
                          :userIdRecharge="rechargeId"></integralRecordList>
    </el-drawer>

  </div>
</template>
  <script>

import { integralDetailSave, topUpRecordsModify } from '@/api/userList/index.js'
import integralRecordList from './integralRecordList.vue'
export default {
  name: 'drawerUserBalance',
  props: {
    drawerRateBalance: {
      type: Boolean,
      default: false
    },
    userId: String,
    data: Object
  },

  components: {
    integralRecordList
  },

  data () {

    // 默认表单数据
    const defaultWhere = {
      // 操作方式
      operateType: '1',
      integral: '',
      payType: 3,
      userId: ''

    };
    return {

      where: {
        ...defaultWhere
      },
      rechargeId: '',
      isUpdate: false,
      rechargeObject: null,
      loading: false,
      integralBoolen: false

    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },


  },
  methods: {

    reload (e) {
      console.log(e)
      this.rechargeObject.integral = e
    },
    // 关闭抽屉
    handleClose () {
      this.$emit('done');
      this.where.integral = ''
      this.$emit('update:drawerRateBalance', false);
    },
    sumbit () {

      if (this.where.operateType == 2) {

        if (this.where.integral > Number(this.rechargeObject?.integral)) {
          this.$message.error('当前的输入的操作大于当前的积分')
          return
        }
      }

      if (!this.where.integral) {
        this.$message.error('请输入当前余额')
        return
      }
      this.$refs['where'].validate((valid) => {
        console.log('保存提交');
        console.log(valid)
        if (!valid) {
          return false;
        }
        this.loading = true;

        // const saveOrUpdate = this.isUpdate ? siteModify : siteInsert;
        integralDetailSave(this.where)
          .then((msg) => {
            console.log(msg);
            this.loading = false;
            this.$message.success(msg);
            if (!this.isUpdate) {
              this.$router.go(0);
            }
            this.handleClose();
            this.integralBoolen = !this.integralBoolen

          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    }
  },
  watch: {
    userId (value) {
      console.log(value)
      if (value) {
        this.rechargeId = value
        this.where.userId = value
      }
    },
    drawerRateBalance (visible) {
      this.$nextTick(() => {
        if (visible) {
          console.log(this.$util);
          console.log(this.data)
          if (this.data) {
            // 隐藏账号密码
            this.rechargeObject = this.data
            this.integralBoolen = !this.integralBoolen
            this.isUpdate = true;

          } else {
            this.isUpdate = false;

          }
        } else {
          this.$nextTick(() => {
            this.$refs['form'].resetFields();
            console.log(this.form);
            this.fileList = [];
          });
        }
      });
    }
  }
};

  </script>
  <style lang="less">
.drawerUserBalance {
  padding: 30px;
}
</style>